<template>
  <div class="login">
  <img src="../../../public/logo.png" alt="">
  <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="登陆" name="first"  class="login1">
          <el-input v-model="lphone" placeholder="请输入管理员号码"></el-input>
          <el-input v-model="lpassWord1" placeholder="请输入密码"></el-input>
          <el-button type="primary" @click="login" >登陆</el-button>
        </el-tab-pane>
        <el-tab-pane label="注册" name="second" class="login2">
          <el-input v-model="suserName" placeholder="请输入管理员姓名"></el-input>
          <el-input v-model="sphone" placeholder="请输入管理员号码"></el-input>
          <el-input v-model="spassWord1" placeholder="请输入密码"></el-input>
          <el-input v-model="spassWord2" placeholder="请确认密码"></el-input>
           <el-button type="primary" @click="setnew">提交</el-button>
        </el-tab-pane>
  </el-tabs>
  </div>
</template>

<script>

export default {
    name:'MyLogin',
     data() {
      return {
        url:'http://192.168.35.36:3005',
        activeName: 'first',
        lphone:'',
        lpassWord1:'',
        suserName:'',
        sphone:'',
        spassWord1:'',
        spassWord2:''
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      login(){
        this.$axios.post(`${this.url}/admin/login`,{
          phone:this.lphone,
          passWord:this.lpassWord1
        }).then(content=>{
          localStorage.setItem('adminid',content.data.data[0].id)
          this.$store.commit('setuser')
          this.$message('登陆成功');
          setTimeout(()=>{
            this.$router.push('/home/data')
          },1000)
          
        })
      },
      setnew(){
         
        this.$axios.post(`${this.url}/admin/setnew`,{
          userName:this.suserName,
          phone:this.sphone,
          passWord:this.spassWord1
        }).then(content=>{
          
          if(content.data.code==200){
            this.$message('注册成功');
          }else{
            this.$message('该号码已经注册过了');
          }
        })
      }
    }
}
</script>

<style lang="less" scoped>
.login{
  height: 100vh;
  width: 100vw;
  position: relative;
  background-image: url(../../../public/R-C.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  img{
    position: absolute;
    height: 90px;
    width: auto;
    z-index: 4;
    top: 28%;
  }
  .el-tabs{
    background-color: white;
    width: 40vw;
    height: 45vh;
    padding:10px 20px;
    .login1{
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: center;
      align-items: center;
      padding: 0 100px;
      padding-top: 5%;
       .el-input{
        margin-bottom: 15px;
      }
      .el-button{
        width: 30%;
        margin-top: 5%;
      }
    }
    .login2{
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: center;
      align-items: center;
      padding: 0 100px;
      padding-top: 5%;
      .el-input{
        margin-bottom: 15px;
      }
      .el-button{
        width: 30%;
        margin-top: 5%;
      }
    }
  }
}
</style>